<template>
    <!-- 弹框 -->
    <el-dialog  v-model="form.flag" :title="form.title" :center="true" top="20%" width="300px">
        <el-form ref="ruleFormRef" :rules="rules" class="demo-ruleForm" >
        <el-form-item class="father" v-for="(item, index) in form.data" :key="index" :label="item.name" :label-width="70" :prop="item.props">
            <el-input :type="item.type" v-model="item.value" autocomplete="off"/>
        </el-form-item>
        </el-form>
        <div class="dialog-footer" style="textAlign:center">
                <slot
                v-if="form.slot"
                :name="form.slot"
                >
                </slot>
        </div>
    </el-dialog>
</template>
<script setup>
import { defineProps,ref,reactive } from 'vue'
import {Avatar ,View ,} from '@element-plus/icons-vue'
import { useStore } from 'vuex'
const store = useStore();
const props = defineProps({
    form:{
     required:true,
     type:Object,
     default:()=>[]
    },
    rules:{
     required:true,
     type:Object,
     default:()=>[]
    }
})
</script>
<style lang="scss" scoped>
    .father{
        position: relative;
    }
    .children{
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translate(0,-50%);
    }
    .el-input__wapper{
        width: 80%;
    }
</style>